import React from 'react'
import { Table, Icon, Modal, Popconfirm, Form, Input, Row, Col, DatePicker, Button, Message } from 'antd';
const FormItem = Form.Item;
import withdrawApi from '../../../api/withdraw';

const { RangePicker } = DatePicker;
import moment from 'moment';

import PanelBox from '../../../components/PanelBox';


export default class TablePage extends React.Component {

  state = {
    data: [],
    pagination: {
      pageSize: 20,
      pageNum: 1,
    },
    loading: false,
    agreeModel:false,
    refuseModel:false,
    updateData: {}
  };
  handleTableChange = (pagination, filters, sorter) => {
    const pager = { ...this.state.pagination };
    if (pagination.current) {
      pager.pageNum = pagination.current;
      pager.current = pagination.current;
    }
    this.setState({
      pagination: pager,
    });
    this.fetch({
      pageSize: pagination.pageSize,
      pageNum: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  autoChange = () => {
    const pagination = { ...this.state.pagination };
    pagination.current = pagination.pageNum;
    this.setState({
      pagination: pagination,
    });
    this.fetch({
      pageSize: pagination.pageSize,
      pageNum: pagination.current,
    });
  }

  fetch = (params) => {
    this.setState({ loading: true });
    console.log(params);
    params.for_type=2;
    withdrawApi.get('/getWithdraw', { params }).then((data) => {
      const _data = data.data.list;
      const pagination = { ...this.state.pagination };
      pagination.total = data.data.total;
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
  }

  componentDidMount = () => {
    this.fetch({ ...this.state.pagination });
  }

  close = () => {
    this.setState({
      agreeModel: false,
      refuseModel: false
    });
  }

  refeshData = () => {
    //this.fetch();
    this.autoChange();
    //this.handleTableChange(this.state.pagination);
  }

  chageRemarks =(e)=>{
    this.state.updateData.remarks=e.target.value;
  }

  handleLogOut = () => {
    const { logout } = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }


  // 接收子组件传入的数据及其方法
  initChildrenParams = (params) => {
    this.resetFields = params.resetFields;
    this.clearPho = params.clearPho;
  }

  //更改数据
  updateWithdraw = (record,state) => {
    this.setState({
      updateData:{
        id:record.id,
        state:state
      }
    })
    if(state==1){
      this.setState({
        agreeModel:true
      })
      return true;
    }
    this.setState({
      refuseModel:true
    })
  }

  updateW =()=>{
    withdrawApi.put('/updateWithdraw', {...this.state.updateData}).then((data) => {
      const result= data.data;
      if(result.code == 0){
        Message.success('操作成功！');
        this.autoChange();
        this.close();
      }else{
        Message.error(result.message);
        this.close();
      }
    });
  }
  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    let columns = [{
      title: '持卡姓名',
      dataIndex: 'cardusername',
      width: '15%',
    }, {
      title: '联系电话',
      dataIndex: 'phone',
      width: '15%',
    }, {
      title: '提现金额',
      dataIndex: 'money',
      width: '10%',
    }, {
      title: '手续费',
      dataIndex: 'othermoney',
      width: '10%'
    }, {
      title:'申请时间',
      dataIndex: 'create_date',
      width: '18%',
      sorter: true,
    },{
      title: '当前状态',
      dataIndex: 'state',
      width: '13%',
      render: (text, record, index) => {
        switch (record.state) {
          case 0:
            return '申请中';
          case 1:
            return '同意提现';
          case 2:
            return '拒绝提现';
          default:
            return '未知';
        }
      },
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
        {
          record.state==0?
          <span>
            <a href="javascript:void(0)"  onClick={this.updateWithdraw.bind(this, record,1)}  >同意申请</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="javascript:void(0)"  onClick={this.updateWithdraw.bind(this, record,2)} >拒绝申请</a>
          </span>
          :'-'
        }
        </span>
      ),
    }];
    

    return (
      <div>
        <SearchUserForm searchUserState={this.state} goSearch={this.fetch}/>
        <PanelBox>
          <Table columns={columns} rowKey={record => record.registered} dataSource={this.state.data} pagination={this.state.pagination}
            loading={this.state.loading} onChange={this.handleTableChange}  rowKey={'id'} 
            expandedRowRender={record => <p style={{ margin: 0 }}>所属银行:{record.bankid}　　　银行卡号:{record.banknum}　　　开户信息:{record.bankstart}　　　备注信息:{record.remarks}</p>}
          />
        </PanelBox>
        <Modal
          title="同意申请提现！"
          visible={this.state.agreeModel}
          onOk={this.updateW}
          onCancel={this.close}
          okText="确认"
          cancelText="取消"
        >
          <p>是否确认同意申请？</p>
        </Modal>
        <Modal
          title="拒绝申请提现！"
          visible={this.state.refuseModel}
          onOk={this.updateW}
          onCancel={this.close}
          okText="确认"
          cancelText="取消"
        >
            <Row gutter={8}>
                  <Col span={2} />
                  <Col span={4}>备注信息：</Col>
                  <Col span={12} > <Input  onChange={this.chageRemarks}  placeholder="备注" /></Col>
              </Row>
        </Modal>
      </div>
    );
  }
}

class SearchForm extends React.Component {
  // 开始搜索
  goSearch = (e) => {
    let params = this.props.form.getFieldsValue().search;
    let _this = this.props;
    params.pageSize = _this.searchUserState.pagination.pageSize;
    if (params.date.length > 0) {
      params.startCreateDate = moment(params.date[0]).format("YYYY-MM-DD");
      params.endCreateDate = moment(params.date[1]).format("YYYY-MM-DD");
    }
    delete params.date;
    _this.goSearch(params);

  }

  srearchStyle = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };


  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.srearchStyle;
    const search = {
      name: "name",
      loginName: "loginName",
      date: "date",
    };

    return <Form onSubmit={this.goSearch} layout="inline" style={{ marginBottom: '10px' }}>
      <FormItem {...formItemLayout} label="	银行卡号" style={{ marginRight: 0 }}>
        {getFieldDecorator('search.banknum', {
        })(
          <Input type="text" placeholder="请输入银行卡号" />
          )}
      </FormItem>
      <FormItem {...formItemLayout} label="联系电话" style={{ marginRight: '0' }}>
        {getFieldDecorator('search.phone', {
        })(
          <Input type="text" placeholder="请输入联系电话" />
          )}
      </FormItem>
      <FormItem {...formItemLayout} label="持卡姓名" style={{ marginRight: '-25px' }}>
        {getFieldDecorator('search.cardUserName', {
        })(
          <Input type="text" placeholder="请输入持卡姓名" />
          )}
      </FormItem>
      <FormItem {...formItemLayout} label="申请时间" style={{ marginLeft: '-10px' }}>
        {getFieldDecorator('search.date', {
          initialValue: []
        })(
          <RangePicker format="YYYY/MM/DD" />
          )}
      </FormItem>
      <FormItem >
        <Button type="primary" icon="search" htmlType="submit">搜索</Button>
      </FormItem>
    </Form>
  }
}
const SearchUserForm = Form.create({})(SearchForm);